<script setup name="standardField">
import standardFieldApi from '@/api/std/standardFieldApi.js'
import PageTable from '@/components/PageTable/index.vue'
import processApi from "@/api/process/processApi.js";
import { onMounted } from 'vue'

const keywords = ref();
const { proxy } = getCurrentInstance();
const fieldTypeList = ref([]);

const props = defineProps(["editor", "rowDbClick"])
const columns = ref([{
	title: '名称',
	key: 'columnName',
	dataIndex: 'columnName',
	ellipsis: true,
},
{
	title: '类型',
	key: 'columnType',
	dataIndex: 'columnType',
	ellipsis: true,
},
{
	title: '长度',
	key: 'columnLength',
	dataIndex: 'columnLength',
	ellipsis: true,
},
{
	title: 'comment',
	key: 'comment',
	dataIndex: 'comment',
	ellipsis: true,
}
])

const stdInfo = ref({
	visible: false,
})
const refresh = () => {
	proxy.$refs.pageTable.refresh(true);
	selectRow.value = null;
}
const loadData = async (data) => {
	const c = await standardFieldApi.page({
		...data
	});
	return c;
}

const addUpdateStd = async () => {
	if (stdInfo.value.id) {
		await standardFieldApi.updateById(stdInfo.value);
	} else {
		await standardFieldApi.add(stdInfo.value);
	}

	stdInfo.value = {}
	stdInfo.value.visible = false;
	refresh();
}
onMounted(() => {
	queryFieldTypeList();
})
const queryFieldTypeList = async () => {
	const c = await processApi.queryFieldTypeList();
	fieldTypeList.value = c;
}
const selectRow = ref();
const rowClick = (data) => {
	selectRow.value = data;
}
const remove = async () => {
	await standardFieldApi.removeById(selectRow.value.id);
	refresh();
}
const rowDbClick = (d) => {
	if (props.rowDbClick) {
		props.rowDbClick(d);
	}
}
</script>

<template>
	<a-card :borderd="false" class="mb-2">
		<a-row :gutter="10" justify="start">
			<a-col :span="6">
				<a-input-search placeholder="请输入内容" v-model:value="keywords" @search="refresh">
				</a-input-search>
			</a-col>
			<a-col :span="6">
				<a-space>
					<a-button v-if="props.editor == null || props.editor == true" @click="stdInfo.visible = true"
						type="primary">新增</a-button>
					<a-button v-if="props.editor == null || props.editor == true" :disabled="selectRow == null"
						@click="stdInfo = selectRow; stdInfo.visible = true">
						修改
					</a-button>
					<a-button v-if="props.editor == null || props.editor == true" :disabled="selectRow == null"
						@click="remove">删除
					</a-button>
				</a-space>
			</a-col>
		</a-row>
	</a-card>


	<Row justify="start">

		<Col :span="24">
		<a-card :borderd="false" class="mb-2">
			<h-table ref="pageTable" height="calc(68vh)" width="100%" :rowClick="rowClick" :paged="true"
				:dbClick="rowDbClick" :columns="columns" :data="loadData">
			</h-table>
		</a-card>
		</Col>

	</Row>


	<a-modal v-model:open="stdInfo.visible" title="新增" :closable="false" @ok="addUpdateStd"
		@cancel="stdInfo.visible = false">

		<a-form ref="formInline" :model="stdInfo" inline>
			<a-form-item label="columnName">
				<a-input type="text" v-model:value="stdInfo.columnName" placeholder="请输入字段名">
				</a-input>
			</a-form-item>
			<a-form-item label="columnType">
				<a-select v-model:value="stdInfo.columnType" clearable filterable>
					<a-select-option v-for="item in fieldTypeList" :label="item.name" :value="item.code"
						:key="item.code">
					</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="columnLength">
				<a-input-number controls-outside v-model:value="stdInfo.columnLength" placeholder="请输入字段长度">
				</a-input-number>
			</a-form-item>
			<a-form-item label="comment">
				<a-input type="text" v-model:value="stdInfo.comment" placeholder="请输入字段comment">
				</a-input>
			</a-form-item>
		</a-form>
	</a-modal>

</template>

<style scoped></style>
